<style scoped>
.app-container >>> .scode {
  cursor: pointer;
  color: #20B2AA;
  text-decoration: underline;
}
.app-container >>> .scodeth {
  color: #515a6e;
}
.layui-row {
  overflow: hidden;
}
.select-item {
  float: left;
  width: 100%;
  height: auto !important;
  word-break:break-all;
}
.layui-row:after, .layui-row:before {
  clear: none;
}
.layui-form >>> .layui-form-select{
  z-index: inherit;
}
.department >>> .layui-table td, .layui-table th {
  padding: 9px 2px;
  /*white-space: nowrap;*/
}
select{
  color: #eee
}
option{
  color: #000;
}
.layui-inline {
  padding: 5px 0;
}
.layui-colla-content {
  border-top: none;
}
.layui-colla-title {
  background: none;
  padding-left: 15px !important;
  height: auto;
}
.department >>> .layui-colla-icon {
  left: auto;
  right: 15px !important;
}
.layui-collapse {
  border: 0 !important;
}
/*.department {*/
/*    position: relative;*/
/*}*/
.openicon {
  position: absolute;
  right: 15px;
  top: 10px;
  z-index: 100000;
  border-radius: 50%;
  color: #fff;
  width: 24px;
  text-align: center;
  height: 24px;
  line-height: 24px;
  background: rgba(0,150,136, 0.7);
}
.nodata {
  background: #f2f2f2;
  color: #333;
  text-align: center;
  padding: 5px 0;
}
.layui-table td p, .layui-table td .rj-cell {
  padding: 3px 0;
}
.layui-table td {
  text-align: left !important;
}

.rj-wrap {
  font-size: 0;
  width: 100%;
  padding: 0 10px;
  display: flex;
}
.cont-left {
  width: 73%;
  display: inline-block;
  font-size: 14px;
  padding: 10px;
}
.cont-right {
  width: 29%;
  display: inline-block;
  font-size: 14px;
  padding: 10px;
  background: #fafafa;
}
.cont-tit {
  font-size: 12px;
  padding: 5px 10px;
  color: #bbb;
}
.cont-box {
  background: #fff;
  margin: 10px 0;
}
.line {
  display: inline-block;
  padding: 5px 10px;
}
.attachimg {
  width: 80px;
  padding: 5px 10px;
  height: 80px;
}
.attachimg:hover {
  cursor: pointer;
}

.layui-elem-field legend.btns {
  position: absolute;
  right: 20px;
  top: -2px;
}
</style>

<template>
      <div class="app-container set-settle">
        <div class="rj-wrap">
<!--        <div style="width: 69%;display: inline-block;">-->
        <div class="cont-left" id="viewSell">
          <p class="cont-tit">基础信息</p>
          <el-form :inline="true" class="modalform" v-loading="loading" label-width="120px" style="margin-bottom: 30px;">
            <div class="line">
              <span class="line-tit">编号</span>
              <span class="line-val">{{form.code}}</span>
            </div>
            <div class="line">
              <span class="line-tit">付款主体</span>
              <span class="line-val">{{form.orgname}}</span>
            </div>
            <div class="line">
              <span class="line-tit">部门</span>
              <span class="line-val">{{form.departname}}</span>
            </div>
            <div class="line">
              <span class="line-tit">供应商</span>
              <span class="line-val">{{form.supplierName}}</span>
            </div>
            <div class="line">
              <span class="line-tit">订单数</span>
              <span class="line-val">{{form.carnum}}</span>
            </div>
            <div class="line">
              <span class="line-tit">货品数量</span>
              <span class="line-val">{{form.weight}}</span>
            </div>
            <div class="line">
              <span class="line-tit">结算金额</span>
              <span class="line-val">{{attachUnit(form.amount, '元')}}</span>
            </div>
            <div class="line">
              <span class="line-tit">已付金额</span>
              <span class="line-val">{{attachUnit(form.preamount, '元')}}</span>
            </div>
            <div class="line">
              <span class="line-tit">已付比例</span>
              <span class="line-val">{{attachUnit(form.percent, '%')}}</span>
            </div>
            <div class="line">
              <span class="line-tit">未付金额</span>
              <span class="line-val">{{attachUnit(form.recamount, '元')}}</span>
            </div>
<!--            <div class="line">-->
<!--              <span class="line-tit">申请金额</span>-->
<!--              <span class="line-val">{{attachUnit(form.applyAmount, '元')}}</span>-->
<!--            </div>-->
<!--            <div class="line">-->
<!--              <span class="line-tit">申请比例</span>-->
<!--              <span class="line-val">{{attachUnit(form.applyPercent, '%')}}</span>-->
<!--            </div>-->
            <div class="line">
              <span class="line-tit">开户行</span>
              <span class="line-val">{{form.bank}}</span>
            </div>
            <div class="line">
              <span class="line-tit">银行账号</span>
              <span class="line-val">{{form.bankcode}}</span>
            </div>
            <div v-if="form.invoiceOn" class="line">
              <span class="line-tit">是否收到发票</span>
              <span class="line-val">{{form.invoiceOn == 1 ? '已收到' : '未收到'}}</span>
            </div>
            <div class="line">
              <span class="line-tit">状态</span>
              <span class="line-val">{{form.statusname}}</span>
            </div>
            <div class="line">
              <span class="line-tit">创建人</span>
              <span class="line-val">{{form.operatorrealname}}</span>
            </div>
            <div class="line">
              <span class="line-tit">创建时间</span>
              <span class="line-val">{{form.createdate}}</span>
            </div>
            <div class="line">
              <span class="line-tit">备注</span>
              <span class="line-val">{{form.remark}}</span>
            </div>
<!--            <div class="rj-cell" v-if="orderfiles.length > 0"><label>附件：</label>-->
<!--              <a target="_blank" v-for="(item, index) in orderfiles" :href="item.url" style="padding: 0 5px;">-->
<!--                <span>{{item.filename}}</span>-->
<!--              </a>-->
<!--            </div>-->
<!--            <el-form-item label="备注" style="display: flex;">-->
<!--&lt;!&ndash;              <el-input readonly v-model="form.remark" />&ndash;&gt;-->
<!--              <span class="line-val">{{form.remark}}</span>-->
<!--            </el-form-item>-->
          </el-form>
          <template v-if="form.itemsFl && form.itemsFl.length > 0">
            <p class="cont-tit">采购订单明细</p>
            <el-table v-loading="loading" :data="form.itemsFl" :border="true">
              <el-table-column label="编号" align="center" prop="code" label-class-name="scodeth" class-name="scode">
                <template slot-scope="scope">
                  <span @click="viewIt(scope.row.id)">{{scope.row.code}}</span>
                </template>
              </el-table-column>
<!--              <el-table-column label="货品" align="center" prop="code">-->
<!--                <template slot-scope="scope">-->
<!--                  <span>{{scope.row.}}</span>-->
<!--                </template>-->
<!--              </el-table-column>-->
<!--              <el-table-column label="单价(元/吨)" align="center" prop="actualSettl" />-->
              <el-table-column label="数量" align="center" prop="totalnum" />
              <el-table-column label="金额(元)" align="center" prop="totalamount" />
              <el-table-column label="采购日期" align="center" prop="purchdate" />
            </el-table>
          </template>
          <template v-if="payRecords && payRecords.length > 0">
            <p class="cont-tit">付款明细</p>
            <el-table v-loading="loading2" :data="payRecords" :border="true">
              <el-table-column label="付款金额(元)" align="center" prop="amount" />
              <el-table-column label="已付金额(元)" align="center" prop="preamount" />
              <el-table-column label="未付金额(元)" align="center" prop="recamount" />
              <el-table-column label="付款日期" align="center" prop="createdate" />
            </el-table>
          </template>
<!--          <template v-if="files.length > 0">-->
<!--            <p>相关附件</p>-->
<!--            <el-table v-loading="loading" :data="files">-->
<!--              <el-table-column label="名称" align="center" prop="name" />-->
<!--              <el-table-column label="上传时间" align="center" prop="createTime">-->
<!--                <template slot-scope="scope">-->
<!--                  <span>{{scope.row.createTime}}</span>-->
<!--                </template>-->
<!--              </el-table-column>-->
<!--              <el-table-column label="上传人" align="center" prop="createName" />-->
<!--              <el-table-column label="附件" align="center" prop="file" >-->
<!--                <template slot-scope="scope">-->
<!--                  <template v-for="fil in scope.row.files">-->
<!--                    <el-image v-if="fil.typeFile == 1" z-index="3000" style="width: 30px; height: 30px;cursor: pointer;margin:3px;" :src="packFileUrl(fil.urlSuolu)" :preview-src-list="scope.row.urlArr"></el-image>-->
<!--                    <el-popover v-else placement="right" width="60" trigger="click">-->
<!--                      <div slot>-->
<!--                        <el-tag @click="showFile(fil.url)" style="margin-right:10px;cursor: pointer;">预览</el-tag>-->
<!--                        <el-tag @click="downFile(fil.url, fil.fileName)" type="info" style="cursor: pointer;">下载</el-tag>-->
<!--                      </div>-->
<!--                      <span slot="reference" style="color: #1890ff;cursor: pointer;white-space: pre;">{{fil.fileName}}</span>-->
<!--                    </el-popover>-->
<!--                  </template>-->
<!--                </template>-->
<!--              </el-table-column>-->
<!--            </el-table>-->
<!--          </template>-->
<!--        </div>-->
        <!-- 流程节点列表 -->
<!--        <div style="width: 30%;display: inline-block;">-->
<!--          <FlowNode v-if="isReady" ref="nodesElem" :flowid="flowid" :orderid="id" :orgId="form.orgId" :deptId="form.deptId"></FlowNode>-->
<!--        </div>-->
        </div>
       <div class="cont-right">
                  <FlowNode v-if="isReady" ref="nodesElem" :flowid="flowid" :orderid="id"></FlowNode>
       </div>
        </div>
      </div>
</template>

<script>
  import { getToken } from "@/utils/auth";
  // import { updatePayment } from "@/api/payment/payment/";
  import { getPayinfo, getPayRecords } from "@/api/pay/payinfo";
  import FlowNode from '@/components/FlowNode/index'

  export default {
    name: 'paypurchaseinfo',
    components: {
      // Template,
      FlowNode
    },
    data() {
      return {
        upload: {
          // 设置上传的请求头部
          headers: { Authorization: "Bearer " + getToken() },
        },
        loading: true,
        loading2: true,
        // 导出遮罩层
        exportLoading: false,
        // 选中数组
        id:'',
        ids: [],
        // 非单个禁用
        single: true,
        // 非多个禁用
        multiple: true,
        // 显示搜索条件
        showSearch: true,
        // 总条数
        total: 0,
        // 预结算明细列表数据
        settleDetails: [],
        // 待支付预结算明细
        setDetailOptions: {},
        // 弹出层标题
        title: "",
        // 是否显示弹出层
        open: false,
        // 查询参数
        queryParams: {
        },
        // 表单参数
        form: {},
        fileList: [],
        permissions: [],
        flowid: 42,
        currFile: {},
        popoverOffset: 0,
        files: [],
        changes: [],
        isReady: false,
        payRecords: []
      }
    },
    computed: {
      variables() {
        return variables;
      }
    },
    async created() {
      this.id = this.$route.query.id;
      await this.getPayApply();
      this.getPayDetails();
    },
    methods: {
      viewFile() {
        if (this.currFile.url) {
          let url = `http://${location.host}/prod-api${this.currFile.url}`;
          window.open(url);
        }
      },
      viewIt(id) {
        this.$router.push({path: '/purchase/purchaseinfo', query: {id: id}});
      },
      /** 查询详情 **/
      async getPayApply() {
        this.loading = true;
        await getPayinfo(this.id).then(response => {
          this.loading = false;
          this.form = response.data;
          this.isReady = true;
        });
      },
      /** 查询明细 **/
      getPayDetails() {
        this.loading2 = true;
        getPayRecords({payguid: this.form.guid}).then(response => {
          this.loading2 = false;
          this.payRecords = response.rows;
        });
      },
    }
  }
</script>

<!--<style lang="scss" scoped>-->
<!--  @import "~@/assets/styles/mixin.scss";-->
<!--  @import "~@/assets/styles/variables.scss";-->

<!--  .app-wrapper {-->
<!--    @include clearfix;-->
<!--    position: relative;-->
<!--    height: 100%;-->
<!--    width: 100%;-->

<!--    &.mobile.openSidebar {-->
<!--      position: fixed;-->
<!--      top: 0;-->
<!--    }-->
<!--  }-->

<!--  .drawer-bg {-->
<!--    background: #000;-->
<!--    opacity: 0.3;-->
<!--    width: 100%;-->
<!--    top: 0;-->
<!--    height: 100%;-->
<!--    position: absolute;-->
<!--    z-index: 999;-->
<!--  }-->

<!--  .fixed-header {-->
<!--    position: fixed;-->
<!--    top: 0;-->
<!--    right: 0;-->
<!--    z-index: 9;-->
<!--    width: calc(100% - #{$sideBarWidth});-->
<!--    transition: width 0.28s;-->
<!--  }-->

<!--  .hideSidebar .fixed-header {-->
<!--    width: calc(100% - 54px)-->
<!--  }-->

<!--  .mobile .fixed-header {-->
<!--    width: 100%;-->
<!--  }-->

<!--  .app-wrapper > > > .el-input {-->
<!--    color: #999;-->
<!--  }-->
<!--  .upload {-->
<!--    margin-top: 20px;-->
<!--  }-->
<!--  .rj-input {-->
<!--    display: inline-block;-->
<!--    height: 26px;-->
<!--    line-height: 26px;-->
<!--  }-->
<!--  .rj-label {-->
<!--    font-size: 14px;-->
<!--    color: #606266;-->
<!--    padding: 0 12px 0 0;-->
<!--    box-sizing: border-box;-->
<!--    font-weight: 600;-->
<!--    display: inline-block;-->
<!--    text-align: right;-->
<!--  }-->
<!--  .rj-text {-->
<!--    color: #606266;-->
<!--    font-size: inherit;-->
<!--    padding: 0 15px;-->
<!--    font-size: 14px;-->
<!--    display: inline-block;-->
<!--  }-->
<!--   .el-tag {-->
<!--     width: 56px;-->
<!--     text-align: center;-->
<!--   }-->
<!--</style>-->
